<template>
  <div class="box">
    <div class="width_50">
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm" size="medium">
        <el-form-item label="" prop="acount">
          <el-input v-model="ruleForm.acount" type="text" autocomplete="true" class="he_40">
            <i slot="prefix" class="el-input__icon el-icon-user-solid" />
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="ruleForm.password" :type="isSee?'text':'password'" autocomplete="off" class="he_40">
            <i slot="prefix" class="el-input__icon el-icon-lock" />
            <i slot="suffix" class="el-input__icon iconfont " :class="isSee?'icon-yanjing_kai':'icon-yanjing_yincang'" @click="see(isSee)" />
          </el-input>
        </el-form-item>
        <el-form-item class="center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <i class="" />
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  data() {
    var validateAcount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 3) {
        callback(new Error('密码不对!'))
      } else {
        callback()
      }
    }
    return {
      isSee: false,
      ruleForm: {
        acount: '',
        password: ''
      },
      rules: {
        acount: [
          { validator: validateAcount, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 显示密码
    see(value) {
      this.isSee = !value
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm.acount === 'zy', this.ruleForm.password === 'weilai')
          if (this.ruleForm.acount === 'zy' && this.ruleForm.password === 'weilai') {
            localStorage.setItem('token', '23566555555895')
            localStorage.setItem('roles', 'superadmin')
            Notification.success({
              title: '登录成功',
              duration: 1000,
              onClose: () => {
                this.$router.replace('/home')
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  height: 100%;
  // background: url(../../assets/img/bd.png) no-repeat center center;
  background: url(../../assets/login/login.jpg) no-repeat center center;
  
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .width_50{
    width: 400px;
  }
  .center{
    text-align: center;
  }
  ::v-deep .el-icon-circle-close{
    display: none;
  }
  ::v-deep .el-icon-circle-check{
    display: none;
  }
  .he_40{
    height: 50px;
    ::v-deep .el-input__inner{
      height: 100%;
      font-size: 18px;
    }
  }
}
</style>
